前言

延續昨天作用域，今天就來更細談認識 ES6 變數宣告的方式。

• var：作用域是依 function 區分
• let、const：作用域是{} block 區塊

學習資源分享

1. JavaScript 那個 let, const, var 到底差在哪？，今年六角學院釋出不少教學影片，即便是過去學過的基礎，但還是能從中獲得不少知識點。這部影片從為什麼要宣告變數開始、介紹變數宣告的差異，也有帶到作用域、Hoisting的觀念。

認識宣告 var、let 差異

以for迴圈為例

• 使用var，會渲染到外面變數
  • 外面宣告 i 為0，迴圈跑完之後，污染到外面的 i，使其變 10
  • 因為var的宣告並不是放在 function 當中，所以當在跑最後一圈時，i 會為 10，跳出迴圈，並渲染到迴圈外

 var i = 0
    for (var i = 0; i < 10; i++) {
      console.log("跑到第" + i + "次");
    }
    console.log(i) ; // JS 21行

• 看看使用 let
  • for迴圈有一個block區塊，所以迴圈執行完，就結束

 let i = 0
    for (let i = 0; i < 10; i++) {
      console.log("跑到第" + i + "次");
    }
    console.log(i);

以if、elae迴圈為例

以var為例，原本x設為1，在判斷式跑完後，變成5

 var x = 1;
    if (x === 1) {
      var x = 5;
    } else {
      var x = 19;
    }
    console.log(x)

以let為例，可以發現在外面宣告let y = 1;並沒有受影響。

let y = 1;
    if (y === 1) {
      let y = 5;
    } else {
      let y = 19;
    }
    console.log(y)

const 常數

• 定義之後，不能改變的數
• 不可重新派值外，也不可重新宣告
• 作用域範圍 :『block scope』
• 以下語法，先設定一個dog = 'Tom' 後面要再修改變數的內容就會發生錯誤

 <script>
    const dog = 'Tom';
    dog = 'Mary';

  </script>

例外：當使用const定義物件...

• 常數定義物件時，是定義整個物件的位置！
• 而在此情形是可以修改物件內的值
• 此範例：設定 farm的name 為 name: 'Wang'，在外面改變其值的內容，並印出來，可以發現修改為name : 'Jason'

 <script>
    const farm = {
      name: 'Wang',
      pet: 'dog'
    }
    farm['name'] = 'Jason';
    console.log(farm);

  </script>

此外在 array 裡面，也可以push資料進去喔！

  <script>
    const a = { name: 'mike' };
    const b = ['eva'];
    a["age"] = 18;
    b.push("tom");
    console.log(a);
    console.log(b)

  </script>

參考資料：
ES6 開始的新生活 let, const
Javascript 學習筆記: 變數(Variable)宣告
JavaScript 使用const關鍵字宣告常數